<template>
    <div class="home-page">
      <!-- 轮播图 -->
      <HomeBanner />
      
      <!-- 分类导航 -->
      <section class="py-8 bg-white">
        <div class="container-custom">
          <HomeCategories />
        </div>
      </section>
      
      <!-- 统计数据 -->
      <section class="py-12 bg-gradient-to-br from-primary-50 to-secondary-50">
        <div class="container-custom">
          <HomeStats />
        </div>
      </section>
      
      <!-- 精选推荐 -->
      <section class="py-12">
        <div class="container-custom">
          <div class="flex items-center justify-between mb-8">
            <h2 class="text-3xl font-bold">精选推荐</h2>
            <NuxtLink to="/products" class="text-primary-600 hover:text-primary-700">
              查看更多 →
            </NuxtLink>
          </div>
          <HomeFeatured />
        </div>
      </section>
      
      <!-- 热门文档 -->
      <section class="py-12 bg-white">
        <div class="container-custom">
          <div class="flex items-center justify-between mb-8">
            <h2 class="text-3xl font-bold">热门文档</h2>
            <NuxtLink to="/docs" class="text-primary-600 hover:text-primary-700">
              查看更多 →
            </NuxtLink>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <DocCard
              v-for="doc in hotDocs"
              :key="doc.id"
              :product="doc"
            />
          </div>
        </div>
      </section>
    </div>
  </template>
  
  <script setup lang="ts">
  // SEO 配置
  useSeoMeta({
    title: '代码小库 - 优质源代码交易与技术文档学习平台',
    description: '提供优质的源代码项目和技术文档，帮助开发者提升技能，加速项目开发',
    ogTitle: '代码小库',
    ogDescription: '优质源代码交易与技术文档学习平台',
    ogImage: '/og-image.jpg',
  })
  
  // 获取热门文档（使用 transform 直接提取数据）
  const { data: hotDocs } = await useFetch('/api/docs/hot', {
    params: { limit: 6 },
    // transform 会在数据返回后立即执行，提取我们需要的部分
    transform: (response: any) => response?.data?.items || []
  })
  
  console.log('热门文档:', hotDocs.value)

  </script>